<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/layui-v2.5.5/layui/css/layui.css"  media="all">
    <script src="/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-inline">
    <label class="layui-form-label">年月选择器</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM">
    </div>
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="search">立即提交</button>
</div>
<div id="container"></div>
<div id="wrapper">
    <button id="plain">普通</button>
    <button id="inverted">反转</button>
    <button id="polar">极地图</button>
</div>
<script>
    // JS 代码
    $(document).ready(function () {
        list();
    })
    function list() {
        var dates=$("#test1").val();
        console.log(dates);
        $.ajax({
            url: 'getsellrank',
            data:{'date':dates},
            type:'GET',
            success: function (res) {
                console.log(res);
                var res = JSON.parse(res);
                //var type=typeof (res['totalprice']);
                //console.log(type);
                console.log(res['totalprice']);
                //console.log(res['totalprice'][0]);
                var str = "";
                //var totalprice=JSON.stringify(res['totalprice']);
                for (var i = 0; i < res['totalprice'].length; i++) {
                    str += res['totalprice'][i] + ','
                }
                str = '[' + str.substr(str, str.length - 1) + ']';
                console.log(str);


                var chart = Highcharts.chart('container', {
                    title: {
                        text: '销售排行'
                    },
                    subtitle: {
                        text: '普通的'
                    },
                    xAxis: {
                        categories: res['hour']
                    },
                    series: [{
                        type: 'column',
                        colorByPoint: true,
                        data: eval(str),
                        showInLegend: false
                    }]
                });
                // 给 wrapper 添加点击事件
                Highcharts.addEvent(document.getElementById('wrapper'), 'click', function (e) {
                    var target = e.target,
                        button = null;
                    if (target.tagName === 'BUTTON') { // 判断点的是否是 button
                        button = target.id;
                        switch (button) {
                            case 'plain':
                                chart.update({
                                    chart: {
                                        inverted: false,
                                        polar: false
                                    },
                                    subtitle: {
                                        text: '普通的'
                                    }
                                });
                                break;
                            case 'inverted':
                                chart.update({
                                    chart: {
                                        inverted: true,
                                        polar: false
                                    },
                                    subtitle: {
                                        text: '反转'
                                    }
                                });
                                break;
                            case 'polar':
                                chart.update({
                                    chart: {
                                        inverted: false,
                                        polar: true
                                    },
                                    subtitle: {
                                        text: '极地图'
                                    }
                                });
                                break;
                        }
                    }
                });
            }
        })
    }
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //年月选择器
        laydate.render({
            elem: '#test1'
            ,type: 'month'
        });
    });
    $("#search").click(function(){

        list();

    })
</script>
</body>
</html>